<template>
  <div>
    <h1>shallowReactive的使用</h1>
    <h2>{{ aa }}</h2>
    <button @click="change">change</button>
  </div>
</template>

<script setup>
// shallowReactive: 定义一个reactive变量，只对它的第一层进行Proxy, 所以只有第一层变化时视图才更新。
//  { a: { b: { c: 1 } } }   利用shallowReactive，只能对第1层代理
//   所谓的第1层就是a这个属性
import { shallowReactive } from "vue";
let aa = shallowReactive({ a: { b: { c: 1 } } });

const change = () => {
  // aa = { d: { e: { f: 110 } } }; // 不是响应式
  // aa.a = { b: { c: 110 } };  // 是响应式的
  // aa.a.b = { c: 110 }; // 不是响应式的
  aa.a.b.c = 110; // 不是响应式的
};
</script>

<style lang="scss" scoped>
</style>